<template>
    <div>
        <el-container style="background-color: grey">
            <el-aside>
                <el-steps direction="vertical">
                    <el-step v-for="item in usData.steps.data"
                             :key="item.code"
                             :title="item.title"
                             :description="item.description"
                             :status="item.status"></el-step>
                </el-steps>
            </el-aside>
            <el-main style="width: 600px">
                <div>
                    <el-divider content-position="left">个人基本信息</el-divider>
                    <el-row>
                        <el-col :span="14"><div class="grid-content bg-purple">
                            <el-row>
                                <el-col><span>用户名：{{this.user.username}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>性别：{{this.user.sex | sex}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>年龄：{{this.user.age}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>爱好：{{this.user.hobby}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>职业：{{this.user.job}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>手机号码：{{this.user.mobile}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <div v-if="this.user.email">
                                        <span>邮箱：{{this.user.email}}</span>
                                        <el-button size="mini" type="danger"
                                                   @click="eData.unbind.visible=true">解绑</el-button>
                                    </div>
                                    <div v-else>
                                        <span>邮箱：</span>
                                        <el-button size="mini" type="primary"
                                                   @click="eData.bind.visible=true">绑定</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </div></el-col>
                        <el-col :span="10"><div class="grid-content bg-purple-light">
                            <el-avatar v-if="this.user.avatar"
                                       :size="130"
                                       :src="this.getBaseUrl+''+this.user.avatar"
                                       class="demo-basic--circle">
                            </el-avatar>
                        </div></el-col>
                    </el-row>
                    <el-divider content-position="left">身份认证信息</el-divider>
                    <el-row v-if="personalIdentityAuth.isNoData">
                        <el-col :span="20"><div class="grid-content bg-purple">
                            <el-collapse accordion>
                                <el-collapse-item>
                                    <template slot="title">
                                        申请身份认证<i class="header-icon el-icon-info"></i>
                                    </template>
                                    <div>
                                        <el-form :model="aData.form"
                                                 :rules="aData.rules"
                                                 ref="aForm"
                                                 v-loading="aData.form.loading"
                                                 style="background-color: darkgray">
                                            <el-form-item label="社区" :label-width="formLabelWidth">
                                                <el-cascader
                                                        size="large"
                                                        :options="regionOptions"
                                                        v-model="aData.form.community"
                                                        @change="handleChange">
                                                </el-cascader>
                                            </el-form-item>
                                            <el-form-item label="类型" :label-width="formLabelWidth">
                                                <el-radio-group v-model="aData.form.type">
                                                    <el-radio :label="0">居民</el-radio>
                                                    <el-radio :label="1">社区长</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="认证材料" :label-width="formLabelWidth">
                                                <span>认证材料</span>
                                            </el-form-item>
                                            <el-form-item :label-width="formLabelWidth">
                                                <el-button type="primary" @click="handleAdd">立即创建</el-button>
                                                <el-button>取消</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div></el-col>
                    </el-row>
                    <el-row v-else>
                        <el-col :span="12"><div class="grid-content bg-purple">
                            <el-row>
                                <el-col><span>身份类型：{{this.personalIdentityAuth.data.type | type}}</span></el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <span>社区名称：{{this.personalIdentityAuth.data.community | community}}</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col>
                                    <span>认证状态：{{this.personalIdentityAuth.data.status | status}}</span>
                                    <el-button type="primary" size="mini" v-show="personalIdentityAuth.data.status===3">重新审核</el-button>
                                    <el-button type="primary" size="mini" v-show="personalIdentityAuth.data.status===2">更换社区</el-button>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col><span>社区贡献：社区文明建设贡献者</span></el-col>
                            </el-row>
                        </div></el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </el-main>
        </el-container>
        <!--弹出框-->
        <div>
            <el-dialog title="绑定邮箱" :visible.sync="eData.bind.visible" width="30%">
                <el-form :model="eData.bind.form" :rules="eData.bind.rules" ref="ebForm" v-loading="eData.bind.loading">
                    <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                        <el-input type="email" v-model="eData.bind.form.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="emailVerifyCode" :label-width="formLabelWidth">
                        <el-input type="text"
                                  v-model="eData.bind.form.emailVerifyCode"
                                  autocomplete="off" placeholder="验证码"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" type="primary" @click="bindEmail">绑定</el-button>
                    <el-button size="mini" type="primary"
                               :disabled="!eData.bind.doEmailVerifyCode"
                               @click="getBindEmailCode(0,eData.bind.form.email)">获取验证码
                        <span v-show="!eData.bind.doEmailVerifyCode">{{eData.bind.count}} s</span>
                    </el-button>
                    <el-button size="mini" type="primary" @click="eData.bind.visible=false">取消</el-button>
                </div>
            </el-dialog>
            <el-dialog title="解绑邮箱" :visible.sync="eData.unbind.visible" width="30%">
                <el-form :model="eData.unbind.form" :rules="eData.unbind.rules" ref="eubForm" v-loading="eData.unbind.loading">
                    <el-form-item label="验证码" prop="emailVerifyCode" :label-width="formLabelWidth">
                        <el-input type="text"
                                  v-model="eData.unbind.form.emailVerifyCode"
                                  autocomplete="off" placeholder="验证码"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" type="primary" @click="unBindEmail">解绑</el-button>
                    <el-button size="mini" type="primary"
                               :disabled="!eData.unbind.doEmailVerifyCode"
                               @click="getUnBindEmailCode(1)">获取验证码
                        <span v-show="!eData.unbind.doEmailVerifyCode">{{eData.unbind.count}} s</span>
                    </el-button>
                    <el-button size="mini" type="primary" @click="eData.unbind.visible=false">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {CodeToText, regionDataPlus} from 'element-china-area-data'

    export default {
        data() {
            return {
                personalIdentityAuth:{
                    loading:false,
                    isNoData:false,
                    data:{},
                },
                //添加
                aData: {
                    visible: false,
                    loading: false,
                    form: {
                        community: [],
                        type: 0,
                    },
                    rules: {
                        community: [
                            { required: true, message: '请输入描述', trigger: 'blur' }
                        ]
                    }
                },
                usData:{
                    steps:{
                        active:3,
                        data:[{
                            code:3,
                            title: "未通过",
                            description:'',
                            status:"wait"
                        },{
                            code:0,
                            title: "待审核",
                            description:'',
                            status:"wait"
                        },{
                            code:1,
                            title: "审核中",
                            description:'',
                            status:"wait"
                        },{
                            code:2,
                            title: "通过",
                            description:'',
                            status:"wait"
                        }],
                        note:''
                    },
                },
                piData:{
                    form:{
                        type : 0,
                        status : 0,
                        ctime : "",
                        mtime : "",
                        atime : "",
                        community : []
                    }
                },
                eData:{
                  unbind:{
                      visible: false,
                      loading: false,
                      count: "", // 初始化次数
                      timer: null,
                      doEmailVerifyCode:true,
                      form: {
                          emailVerifyCode:'',
                      },
                      rules: {
                          emailVerifyCode:[
                              { required: true, message: '请输入验证码', trigger: 'blur' }
                          ],
                      }
                  },
                  active:{
                      visible: false,
                      loading: false,
                      form:{
                          emailVerifyCode:''
                      },
                      rules: {
                          emailVerifyCode:[
                              { required: true, message: '请输入验证码', trigger: 'blur' }
                          ]
                      }
                  },
                  bind:{
                      visible: false,
                      loading: false,
                      doEmailVerifyCode:true,
                      count: "", // 初始化次数
                      timer: null,
                      form: {
                          emailVerifyCode:'',
                          email:''
                      },
                      rules: {
                          emailVerifyCode:[
                              { required: true, message: '请输入验证码', trigger: 'blur' }
                          ],
                          email: [
                              { required: true, message: '邮箱', trigger: 'blur' },
                              { type: 'email', message: '邮箱格式不符'}
                          ],
                      }
                  }
                },
                regionOptions: regionDataPlus,
                selectedOptions: ["110000", "110100", "110101"],
                formLabelWidth: '120px'
            };
        },
        methods: {
            updateSteps(status) {
                switch (status) {
                    case 0:
                        this.$set(this.usData.steps.data, 1, {
                            code: 0,
                            title: "待审核",
                            description: '请耐心等待',
                            status: "process"
                        });
                        break;
                    case 1:
                        this.$set(this.usData.steps.data, 2, {
                            code: 1,
                            title: "审核中",
                            description: '正在审核中',
                            status: "process"
                        });
                        break;
                    case 2:
                        this.$set(this.usData.steps.data, 3, {
                            code: 2,
                            title: "通过",
                            description: '恭喜你审核通过',
                            status: "finish"
                        });
                        break;
                    case 3:
                        this.$set(this.usData.steps.data, 0, {
                            code: 3,
                            title: "未通过",
                            description: '您的身份认证未审核通过哦！请仔细检查',
                            status: "error"
                        });
                        break;
                    default:
                        break;
                }
            },
            //装载权限
            loadPersonalIdentityAuth() {
                const _this = this;
                _this.personalIdentityAuth.loading = true;
                this.getRequest("/identityauth/userpersonal")
                    .then(resp => {
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            if (data.result) {
                                _this.personalIdentityAuth.data = data.result;
                            } else {
                                //该用户无身份认证数据
                                _this.personalIdentityAuth.isNoData = true;
                            }
                            _this.personalIdentityAuth.loading = false;
                            _this.updateSteps(_this.personalIdentityAuth.data.status);
                        }else {
                            _this.personalIdentityAuth.loading = false;
                        }
                    })
            },
            //添加权限
            handleAdd() {
                const _this = this;
                this.$refs.aForm.validate((valid) => {
                    if (valid) {
                        _this.aData.loading = true;
                        let identityAuthVo = _this.aData.form;
                        this.postRequestJson("/identityauth/userapply", identityAuthVo)
                            .then(resp => {
                                if (resp && resp.data && resp.data.code === '200') {
                                    _this.aData.loading = false;
                                    //清空数据
                                    _this.aData.form = {
                                        community: "",
                                        type: 0,
                                    };
                                    _this.loadPersonalIdentityAuth();
                                    _this.aData.visible = false;
                                }else {
                                    _this.aData.loading = false;
                                }
                            })
                    }
                });
            },
            bindEmail(){
                const _this = this;
                this.$refs.ebForm.validate((valid) => {
                    if (valid) {
                        let params=_this.eData.bind.form;
                        _this.eData.bind.loading=true;
                        _this.putRequest("/mail/bind",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    //更新用户邮箱信息
                                    const emailInfo={
                                        email: _this.eData.bind.form.email,
                                        emailActive: false
                                    };
                                    _this.$store.commit('changeUserEmail',emailInfo);
                                    _this.eData.bind.loading=false;
                                    _this.eData.bind.visible=false;
                                    //清空数据
                                    _this.eData.bind.form={
                                        emailVerifyCode:'',
                                        email:''
                                    };
                                    _this.loadPersonalIdentityAuth();
                                }else{
                                    _this.eData.bind.loading=false;
                                }
                            })
                    }
                });
            },
            unBindEmail(){
                const _this = this;
                this.$refs.eubForm.validate((valid) => {
                    if (valid) {
                        let params=_this.eData.unbind.form;
                        _this.eData.unbind.loading=true;
                        _this.putRequest("/mail/unbind",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    //更新用户邮箱信息
                                    const emailInfo={
                                        email: "",
                                        emailActive: false
                                    };
                                    _this.$store.commit('changeUserEmail',emailInfo);
                                    _this.eData.unbind.loading=false;
                                    _this.eData.unbind.visible=false;
                                    //清空数据
                                    _this.eData.unbind.form={
                                        emailVerifyCode:'',
                                    };
                                    _this.loadPersonalIdentityAuth();
                                }else{
                                    _this.eData.unbind.loading=false;
                                }
                            })
                    }
                });
            },
            activeEmail(){

            },
            getBindEmailCode(emailType,email){
                console.log("邮箱: "+email);
                this.$refs.ebForm.validateField("email",(emailError)=>{
                    console.log('邮箱错误: '+emailError);
                    if (!emailError){
                        let params={
                            emailType:emailType,
                            email:email
                        };
                        const TIME_COUNT = 60; //更改倒计时时间
                        if (!this.eData.bind.timer) {
                            this.eData.bind.count = TIME_COUNT;
                            this.eData.bind.doEmailVerifyCode = false;
                            this.eData.bind.timer = setInterval(() => {
                                console.log("计时器");
                                if (this.eData.bind.count > 0 && this.eData.bind.count <= TIME_COUNT) {
                                    this.eData.bind.count--;
                                } else {
                                    this.eData.bind.doEmailVerifyCode = true;
                                    clearInterval(this.eData.bind.timer); // 清除定时器
                                    this.eData.bind.timer = null;
                                }
                            }, 1000);
                        }
                        this.getRequest("/mail/emailvcode",params)
                            .then(resp =>{
                                if (resp && resp.data && resp.data.code === '200') {
                                    const data = resp.data;
                                    console.log(data);
                                }
                            })
                    }
                })
            },
            getUnBindEmailCode(emailType){
                console.log("解绑");
                let params={
                    emailType:emailType
                };
                const TIME_COUNT = 60; //更改倒计时时间
                if (!this.eData.unbind.timer) {
                    this.eData.unbind.count = TIME_COUNT;
                    this.eData.unbind.doEmailVerifyCode = false;
                    this.eData.unbind.timer = setInterval(() => {
                        console.log("计时器");
                        if (this.eData.unbind.count > 0 && this.eData.unbind.count <= TIME_COUNT) {
                            this.eData.unbind.count--;
                        } else {
                            this.eData.unbind.doEmailVerifyCode = true;
                            clearInterval(this.eData.unbind.timer); // 清除定时器
                            this.eData.unbind.timer = null;
                        }
                    }, 1000);
                }
                this.getRequest("/mail/emailvcode",params)
                    .then(resp =>{
                        if (resp && resp.data && resp.data.code === '200') {
                            const data = resp.data;
                            console.log(data);
                        }
                    })
            },
            handleChange (value) {
                console.log(value)
                // const dist=value[2];
                console.log(CodeToText[value[0]])
            }
        },
        computed: {
            user() {
                return this.$store.state.user;
            },
            getBaseUrl() {
                return this.$store.getters.getBaseUrl;
            }
        },
        mounted() {
            //装载个人身份认证信息
            this.loadPersonalIdentityAuth();
        },
        filters: {
            sex: (cellValue) => {
                let ret = '';  //你想在页面展示的值
                switch (cellValue) {
                    case 0:
                        ret = '女';
                        break;
                    case 1:
                        ret = '男';
                        break;
                    default:
                        ret = '未知';
                        break;
                }
                return ret;
            },
            type: (cellValue) => {
                let ret = '';  //你想在页面展示的值
                switch (cellValue) {
                    case 0:
                        ret = '居民';
                        break;
                    case 1:
                        ret = '社区长';
                        break;
                    default:
                        ret = '未知';
                        break;
                }
                return ret;
            },
            status: (cellValue) => {
                let ret = '';  //你想在页面展示的值
                switch (cellValue) {
                    case 0:
                        ret = '未审核';
                        break;
                    case 1:
                        ret = '审核中';
                        break;
                    case 2:
                        ret = '通过';
                        break;
                    case 3:
                        ret = '未通过';
                        break;
                    default:
                        ret = '未知';
                        break;
                }
                return ret;
            },
            community:(cellValue)=>{
                return CodeToText[cellValue[0]] + '/' + CodeToText[cellValue[1]]+ '/' + CodeToText[cellValue[2]];
            }
        }
    }
</script>
<style scoped>
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>

